import * as echarts from 'echarts';

type EChartsOption = echarts.EChartsOption;

export const useFinanceCharts = () => {
  const title = '近一年收支情况';
  const financeOption: EChartsOption = {
    title: {
      text: title
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999'
        }
      }
    },
    toolbox: {
      feature: {
        dataView: { show: true, readOnly: false },
        magicType: { show: true, type: ['line', 'bar'] },
        restore: { show: true },
        saveAsImage: { show: true }
      }
    },
    legend: {
      data: ['当月收入', '当月支出', '当月利润', '总收入', '总支出', '总利润']
    },
    xAxis: [
      {
        type: 'category',
        data: [
          '1月',
          '2月',
          '3月',
          '、4月',
          '5月',
          '6月',
          '7月',
          '8月',
          '9月',
          '10月',
          '11月',
          '12月'
        ],
        axisPointer: {
          type: 'shadow'
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: '当月',
        min: 0,
        max: 50000,
        interval: 5000,
        axisLabel: {
          formatter: '{value} 元'
        }
      },
      {
        type: 'value',
        name: '汇总',
        min: 0,
        max: 1000,
        interval: 100,
        axisLabel: {
          formatter: '{value} 千元'
        }
      }
    ],
    series: [
      {
        name: '当月收入',
        type: 'bar',
        yAxisIndex: 0,
        tooltip: {
          valueFormatter: function (value: number) {
            return value + ' 元';
          } as any
        },
        data: [20000, 20000, 20000, 20000, 20000, 20000, 20000, 20000, 20000, 20000, 20000, 20000]
      },
      {
        name: '当月支出',
        type: 'bar',
        yAxisIndex: 0,
        tooltip: {
          valueFormatter: function (value: number) {
            return value + ' 元';
          } as any
        },
        data: [10000, 10000, 10000, 10000, 10000, 10000, 10000, 10000, 10000, 10000, 10000, 10000]
      },
      {
        name: '当月利润',
        type: 'bar',
        yAxisIndex: 0,
        tooltip: {
          valueFormatter: function (value: number) {
            return value + ' 元';
          } as any
        },
        data: [10000, 10000, 10000, 10000, 10000, 10000, 10000, 10000, 10000, 10000, 10000, 10000]
      },
      {
        name: '总收入',
        type: 'line',
        yAxisIndex: 1,
        tooltip: {
          valueFormatter: function (value: number) {
            return value + ' 千元';
          } as any
        },
        data: [20, 40, 60, 80, 100, 120, 140, 160, 180, 200, 220, 240]
      },
      {
        name: '总支出',
        type: 'line',
        yAxisIndex: 1,
        tooltip: {
          valueFormatter: function (value: number) {
            return value + ' 千元';
          } as any
        },
        data: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120]
      },
      {
        name: '总利润',
        type: 'line',
        yAxisIndex: 1,
        tooltip: {
          valueFormatter: function (value: number) {
            return value + ' 千元';
          } as any
        },
        data: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120]
      }
    ]
  };
  return { financeOption };
};
